<template>
<div>
    <div class="head">
        <el-row>
            <el-col :span="3">文件总数：{{this.model_file.length}}</el-col>
            <el-col :span='21'>
                <div class="button">
                    <el-button type="success" plain @click="ModeldialogFormVisible = true">上传模型文件</el-button>
                </div>
            </el-col>
        </el-row>

        <el-dialog title="模型文件" :modal=false :visible.sync="ModeldialogFormVisible">
            <el-form :model="uploadform">
                <el-card class="box-card">
                    <div class="infinite-list" v-infinite-scroll="load">
                        <el-upload class="upload-demo" drag action="/action/upload"   
                         :data="upLoadData" :on-success='successHandle' multiple
                         :disabled='false'
                         >
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        </el-upload>
                        <template>模型文件说明</template>
                        <el-input type="textarea" :rows="2" placeholder="请输入模型文件说明" v-model="uploadform.note">
                        </el-input>
                    </div>
                </el-card>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addModel()">提交</el-button>
                <el-button @click="ModeldialogFormVisible = false">返回</el-button>
            </div>
        </el-dialog>
    </div>
    <div class="body">
        <el-table :data="model_file" :row-class-name="tableRowClassName" height="100%" style="width: 100%">
            <el-table-column fixed prop="id" label="记录编号" :index="indexMethod" width="80"></el-table-column>
            <el-table-column prop="file_name" label="文件名" width="150"></el-table-column>
            <el-table-column prop="file_up_time" label="文件上传时间" width="180"> </el-table-column>
            <el-table-column prop="mod_des" label="说明"></el-table-column>
            <el-table-column align="right">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="220">
                <template slot-scope="scope">
                    <el-button size="mini" type="info" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
                    <el-button size="mini" slot="reference" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-dialog title="模型文件信息" :modal=false :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-card class="box-card">
                    <div class="infinite-list" v-infinite-scroll="load">
                        <el-row>
                            <el-col :span="7">上传时间</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <template v-if='!modform'>{{form.uptime}}</template>
                                <template v-else>
                                    <el-input v-model="form.uptime" disabled></el-input>
                                </template>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="7">模型文件名称</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <template v-if='!modform'>{{form.filename}}</template>
                                <template v-else>
                                    <el-input v-model="form.filename"></el-input>
                                </template>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="7">模型文件说明</el-col>
                            <el-col :span="2">:</el-col>
                            <el-col :span="10">
                                <template v-if='!modform'>{{form.note}}</template>
                                <template v-else>
                                    <el-input type="textarea" v-model="form.note"></el-input>
                                </template>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <template v-if="!modform">
                    <el-button type="primary" @click="modform =true">点击修改</el-button>
                </template>
                <template v-else>
                    <el-button type="primary" @click="saveModform()">保存修改</el-button>
                </template>
                <el-button @click="dialogFormVisible = false">返回</el-button>
            </div>
        </el-dialog>
</div>
</template>

<script>
import axios from '@/plugins/axios' //在哪里用就在哪里引入
require('@/mock/model_info.js')
export default {
    data() {
        return {
        model_file: [],
            device_db: {},
            search: '',
            dialogFormVisible: false,
            ModeldialogFormVisible:false,
             modform:false,
            upLoadData:{
                "type":'3'
            },
            uploadform: {
                "oper": '2',
                "filename": '', //文件名
                "note": '', //智能库文件说明注释
            },
            form: {
            },
            formLabelWidth: '120px'
        }
    },
    created: function () {
        ///action/model_info  假数据接口
        axios.get('/action/mod_status').then((res) => {
            this.model_file = res.data.model_info
        })
    },
    methods: {
      successHandle(response, file, fileList){
        console.log('response: ', response);
        console.log('fileList: ', fileList);
        console.log('file: ', file);
        console.log(response.result);
        this.uploadform.filename = response.result


      },
        indexMethod(index) {
            return index;
        },
        load() {
            this.count = 2;
        },
        upload() {
            this.dialogFormVisible = true;
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
        //离线浅红，在线浅蓝
        tableRowClassName({
            row,
            rowIndex
        }) {
            if (rowIndex === 1) {
                return 'warning-row';
            } else if (rowIndex === 3) {
                return 'success-row';
            }
            return '';
        },
        Search(index, row) {
            console.log(index, row);
        },
        handleEdit(index, row) {
            this.dialogFormVisible = true;
            this.form={
                 "oper":'3',
                "id":row.id,
                "filename":row.file_name,
                "uptime":row.file_up_time,
                "note":row.mod_des
            }
        },
        
        handleState(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(index, row);
            alert("正在删除"+row.file_name)
            let data={
                "oper":'1',
                "id":row.id
            }
            axios.post('/action/mod_oper',data).then((res)=>{
                if(res.data.code=='1'){
                  this.$message({
                          message:  row.file_name+'删除成功',
                          type: 'success'
                     });
                    axios.get('/action/mod_status').then((res) => {
                    this.model_file = res.data.model_info
                    })
                }else{
                     this.$message.error('删除失败，请联系管理员！');
                }
            })
        },

        //添加模型文件
        addModel(){
            
            console.log("上传模型的文件信息如下！");
            console.log(this.uploadform);
            axios.post('/action/mod_oper',this.uploadform).then((res)=>{
                if(res.data.code=='1'){
                   this.$message({
                          message:  this.uploadform.filename+'添加成功',
                          type: 'success'
                     });
                    this.ModeldialogFormVisible = false;
                  axios.get('/action/mod_status').then((res) => {
                    this.model_file = res.data.model_info
                    })
                }else{
                   this.$message.error('上传失败，请联系管理员！');
                }
            })
        },

        //修改模型文件
        saveModform(){
        this.modform = false;
        console.log(this.form);
         axios.post('/action/mod_oper',this.form).then((res)=>{
                if(res.data.code=='1'){
                    this.$message({
                          message: '修改成功',
                          type: 'success'
                     });
                    axios.get('/action/mod_status').then((res) => {
                    this.model_file = res.data.model_info
                    })
                    this.dialogFormVisible = false;

                }else{
                   this.$message.error('修改失败，请联系管理员！');
                }
            })
        }

    }

}
</script>

<style scoped>
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}

.head {
    position: absolute;
    top: 15%;
    left: 14.5%;
    width: 82%;
    padding: 3px;
    margin: 0px;
    height: 40px;
    line-height: 40px;
    border: 1px solid black;
}

.button {
    position: absolute;
    left: 89%;
}

.body {
    position: absolute;
    top: 23%;
    left: 14.5%;
    width: 82%;
    padding: 3px;
    margin: 0px;
    height: 73%;
    border: 1px solid black;
}
</style>
